<template>
  <div class="foot">
    <div class="foot-wrap" v-show="showFoot">
      <router-link class="foot-nav" to="/home">
        <i class="iconfont icon-homepage_fill"></i>
        <p>首页</p>
      </router-link>
      <router-link class="foot-nav" to="/list">
        <i class="iconfont icon-manage_fill"></i>
        <p>列表</p>
      </router-link>
      <router-link class="foot-nav" to="/message">
        <i class="iconfont icon-message_fill"></i>
        <p>消息</p>
      </router-link>
      <router-link class="foot-nav" to="/mine">
        <i class="iconfont icon-mine_fill"></i>
        <p>我的</p>
      </router-link>
    </div>
    <div class="foot-wrap" v-show="showNavs">
      <router-link class="foot-nav" to="/admin">
        <i class="iconfont icon-homepage_fill"></i>
        <p>全部商品</p>
      </router-link>
      <router-link class="foot-nav" to="/add">
        <i class="iconfont icon-manage_fill"></i>
        <p>添加商品</p>
      </router-link>
      <router-link class="foot-nav" to="/admin">
        <i class="iconfont icon-message_fill"></i>
        <p>消息</p>
      </router-link>
      <router-link class="foot-nav" to="/users">
        <i class="iconfont icon-mine_fill"></i>
        <p>全部用户</p>
      </router-link>
    </div>
  </div>
</template>

<script>
  import {getCookie} from "../../assets/js/cookie";

  export default {
    name: "newFooter",
    data() {
      return {
        showFoot: false,
        showNavs: false
      }
    },
    watch: {
      '$route': 'changeIcon'
    },
    mounted() {
      if (getCookie('username')) {
        this.showFoot = true
      }
      this.changeIcon();
    },
    methods: {
      changeIcon() {
        this.showFoot = false;
        this.showNavs = false;
        if (this.$route.path == '/home' || this.$route.path == '/list' || this.$route.path == '/message' || this.$route.path == '/mine') {
          this.showFoot = true
        } else if (this.$route.path == '/admin' || this.$route.path == '/add' || this.$route.path == '/admin' || this.$route.path == '/users') {
          this.showNavs = true;
        }
      }
    }
  }
</script>

<style scoped lang="less">
  .foot {
    width: 100%;
    height: 0.9rem;
    background-color: #ffffff;
    padding: 0.15rem 0;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 3;
    .foot-wrap {
      width: 100%;
      height: 100%;
      .foot-nav {
        width: 25%;
        height: 100%;
        float: left;
        color: #333333;
        .iconfont {
          font-size: 0.4rem;
          line-height: 0.5rem;
          display: block;
        }
        p {
          font-size: 0.24rem;
          line-height: 0.4rem;
          text-align: center;
        }
        &.router-link-active {
          color: #f00;
        }
      }
    }
  }
</style>
